<template>
	<view class="">
		<nav-bar isItem>
			<image slot="left" @click="back" src="@/static/img/common/left-arrow.svg" alt=""
				style="width: 64rpx;height: 64rpx;" />
			<view slot="center">添加地址</view>
		</nav-bar>
		<view class="edit_address">
			<view class="view">
				<view class="desc">收货人</view>
				<input class="input" v-model="receiver" :class="receiver_class" type="text" placeholder="姓名" minlength="1"
					maxlength="10" autocomplete="false" />
			</view>
			<view class="view">
				<view class="desc">联系方式</view>
				<input class="input"  v-model="phone" :class="phone_class" type="number" placeholder="手机号码" minlength="11"
					maxlength="11" autocomplete="false" max="11" min="11" />
			</view>
			<view class="view">
				<view class="desc">选择地址</view>
				<address-picker @updateAddress="updateAddress"></address-picker>

			</view>
			<view class="view">
				<view class="desc">详细地址</view>
				<input class="input" v-model="address" :class="address_class" type="text" placeholder="详细地址需填写街道楼栋楼层或房间号信息"
					autocomplete="false" minlength="1" maxlength="32" />
			</view>

			<view id="submit_Btn" :class="btnIsActive" class="view" @click="submit">
				<span>确认</span>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		addAddress
	} from "network/user";

	import NavBar from "components/common/NavBar/NavBar"
	import AddressPicker from "components/common/AddressPicker/addressPicker"

	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			AddressPicker,
			NavBar
		},
		data() {
			return {
				selected: [],
				address: "",
				receiver: "",
				phone: "",
				phoneReg: /^1[3-9]\d{9}$/,
				province: "北京市",
				city: "北京市",
				area: "东城区",
				cityIdx: 0,
				areaIdx: 0,
				provinceIdx: 0,
			};
		},
		computed: {
			btnIsActive() {
				return this.receiver.length &&
					this.isPhoneValid && this.isAddressValid && this.address.length ?
					"btn_active" :
					"btn";
			},
			isAddressValid() {
				return this.province &&
					this.city &&
					this.area
			},
			isPhoneValid() {
				return this.phoneReg.exec(this.phone)
			},
			receiver_class() {
				return this.receiver.length ? 'dirty' : '';
			},
			phone_class() {
				if (this.phone.length)
					return this.isPhoneValid ? 'dirty' : 'error';
				return '';
			},
			address_class() {
				return this.address.length ? 'dirty' : '';
			},
		},
		methods: {
			...mapMutations(["setAddress", "setAddressReload"]),

			handleChange(value) {
				console.log(`你选中了${value}`);
			},
			submit() {
				let data = {
					address: this.address,
					phone: this.phone,
					receiver: this.receiver,
					province: this.province,
					city: this.city,
					area: this.area,
					cityIdx: this.cityIdx,
					areaIdx: this.areaIdx,
					provinceIdx: this.provinceIdx
				}
				console.log('data', data);
				addAddress(JSON.stringify({
					data
				})).then(async (res) => {
					if (res[1].data.tag) {
						await this.success('添加成功');
						this.setAddressReload(true);
						this.back();
					}
				});
			},
			updateAddress(data) {
				this.province = data.province;
				this.city = data.city;
				this.area = data.area;
				this.cityIdx = data.cityIdx;
				this.areaIdx = data.areaIdx;
				this.provinceIdx = data.provinceIdx;
			}
		},

	};
</script>
<style lang="scss" scoped>
	.btn_active {
		background-color: rgb(252, 26, 0);
	}

	.btn {
		background-color: rgb(255, 188, 179);
		pointer-events: none;
	}

	#submit_Btn {
		width: 85vw;
		height: 80rpx;
		border-radius: 70rpx;
		position: fixed;
		bottom: 50rpx;
		left: 5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: whitesmoke;
	}

	.edit_address {
		display: flex;
		flex-direction: column;
		background-color: white;
		width: 100vw;
		height: 100vh;
	}

	.desc {
		color: rgb(121, 121, 121);
		width: 100%;
		height: 50rpx;
		padding: 20rpx 0;
	}

	.edit_address> .view {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		width: 95vw;
		padding: 1vh 2.5vw;
		border-bottom: 2rpx solid rgb(216, 216, 216);
		font-size: 32rpx;
	}

	.input {
		outline: none;
		width: 100%;
		height: 60rpx;
	}

	.input::placeholder {
		color: rgb(216, 216, 216);
	}

	.area {
		width: 100%;
	}

	.dirty {
		border-color: #5a5;
		background: #efe;
	}

	.dirty:focus {
		outline-color: #8e8;
	}

	.error {
		border-color: red;
		background: #fdd;
	}

	.error:focus {
		outline-color: #f99;
	}
</style>
